<template>
  <div class="chat-item">
    <div class="chat-item-inner response" v-if="detail.uid != userInfos.hash">
      <el-image class="avatar" :src="client.avatar" @click="handleUserCard($event)"/>
      <div class="c-wrap">
        <p class="subtitle">{{ client.name }}&nbsp;&nbsp;{{ formatDateTimeStyleOne(detail.time, '/') }}</p>
        <div class="content">
          <template v-if="detail.messageType == 'text'">{{ detail.content }}</template>
          <template v-if="detail.messageType == 'image'">
            <el-image class="msg-image" :src="detail.content"/>
          </template>
        </div>
      </div>
    </div>
    <div class="chat-item-inner request" v-else>
      <div class="c-wrap">
        <p class="subtitle">{{ userInfos.userName }}&nbsp;&nbsp;{{ formatDateTimeStyleOne(detail.time, '/') }}</p>
        <div class="content">
          <template v-if="detail.messageType == 'text'">{{ detail.content }}</template>
          <template v-if="detail.messageType == 'image'">
            <el-image class="msg-image" :src="detail.content"/>
          </template>
        </div>
      </div>
      <el-image class="avatar" :src="userInfos.avatar" @click="handleUserCard($event)"/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";
import {formatDateTimeStyleOne} from "/@/utils/format.ts";

export default defineComponent({
  name: 'ChatMsgItem',
  methods: {formatDateTimeStyleOne},
  props: {
    client: {
      type: Object,
      default: () => {
      },
    },
    detail: {
      type: Object,
      default: () => {
      },
    },
  },
  setup(props, {emit}) {
    const stores = useUserInfo();
    const {userInfos} = storeToRefs(stores);
    const handleUserCard = (event: any) => {
      emit("handleUserCard", {user: {uid: props.detail.uid, groupId: props.detail.groupId || ''}, event: event})
    }
    return {
      userInfos,
      handleUserCard
    };
  },
});
</script>


<style scoped lang="scss">
.chat-item {
  width: 100%;
  margin-bottom: 10px;

  &-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: row;

    .c-wrap {
      max-width: calc(100% - 80px);
    }

    .subtitle {
      color: gray;
      margin-bottom: 5px;
      font-size: 12px;
    }

    .avatar {
      width: 40px;
      height: 40px;
      margin-left: 10px;
      margin-right: 10px;
      border-radius: 50%;
    }

    .content {
      padding: 10px;
      background-color: #ffffff;
      border: 1px solid #efefef;
      border-radius: 0 15px 15px 15px;
      color: #212121;
      box-shadow: 0 2px 3px 0 #a9a9a9;
      overflow-wrap: break-word;
      white-space: normal;

      .msg-image {
        max-width: 150px;
      }
    }
  }

  .request {
    justify-content: flex-end;

    .subtitle {
      text-align: right;
    }

    .content {
      border-radius: 15px 0 15px 15px;
    }
  }
}
</style>
